<div class="d-flex w-100 p-2">
  <div #qrcodecontainer class="drag-handler d-flex flex-column w-100 h-100">
    <div class="w-100" [ngStyle]="{'height.px': qrCodeHeight, 'width.px': qrCodeWidth}">
      <div class="text-center qr-code-container w-100 h-100 p-3">
        @if (setupUri) {
        <div class="w-100 h-100">
          <app-qrcode [data]="setupUri" class="mx-auto" />
        </div>
        }
      </div>
    </div>
    <div #pincode class="text-center w-100 mt-auto gridster-item-content">
      <p class="mb-1 font-monospace">{{ pin }}</p>
      <p class="grey-text mb-1 small">
        <i
          class="fas fa-link"
          [ngClass]="{
            'green-text': paired,
            'grey-text': !paired
          }"
        ></i>
        {{ (paired ? 'status.widget.qr_paired' : 'status.widget.qr_unpaired') | translate }} @if (!paired) {
        <span> &middot; {{ 'status.code_scan' | translate }} </span>
        }
      </p>
    </div>
  </div>
</div>
